<template>
  <div class="app-container">
    <div class="coupon-type">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <div class="grid-content title">请根据标签确认相关信息录入</div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-form :inline="true">
          <el-form-item label="发送模板">
            <el-input v-model="roleName" placeholder="发送模板名" />
          </el-form-item>
        </el-form>
      </el-row>
      <el-row v-if="false">
        <el-col :span="24">
          <div class="set-header">
            <span>礼券信息</span>
            <span @click="handleAddCouponType">+ 新增礼券</span>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="false">
        <el-col :span="24">
          <div class="coupon-name">
            <span class="name">礼券</span>
            <el-select
              v-model="couponId"
              placeholder="请选择礼券"
              filterable
              @change="handleChangeCouponSelect"
            >
              <el-option
                v-for="coupon of couponList"
                :key="coupon.id"
                :label="coupon.name"
                :value="coupon.id"
              />
            </el-select>
          </div>
        </el-col>
      </el-row>
      <!-- 预览 -->
      <el-row v-if="false">
        <el-col :span="6">
          <div class="coupon-view">
            <div class="view-content">
              <div class="left">
                <p class="title">{{ activeCoupon.title }}</p>
                <p class="desc">{{ activeCoupon.desc }}</p>
              </div>
              <img class="coupon-img" :src="activeCoupon.picUrl">
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 选择标签 -->
      <el-row>
        <el-col :span="7">
          <div class="additional">
            <span class="name">会员数据统计月</span>
            <span class="name-info">(会员数据不同月)</span>
            <el-date-picker
              v-model="statisticalMonth"
              type="month"
              placeholder="标签统计月份"
              value-format="yyyy-MM"
              style="width: 200px"
            />
          </div>
          <div class="set-header custome">
            <span>顾客标签</span>
            <span @click="handleAddLabel">+ 新增组合标签</span>
          </div>
          <div
            v-loading="labelLoading"
            element-loading-text="正在计算预计总人数，请稍候..."
            class="label-choose"
          >
            <div v-if="false" class="search-condition">
              <span
                v-for="(search, index) of searchList"
                :key="search.name"
                :class="['item', search.chooseActive ? 'active' : '']"
                @click="handleChooseSearch(search, index)"
              >
                {{ search.name }}
              </span>
              <span class="item">新增标签</span>
            </div>
            <div class="choose-label">
              <div v-for="(label, index) of combinationLabelList" :key="label.labelId" class="choose-label-item">
                <div :class="['select-icon', label.chooseActive ? 'active' : '']" @click="handleChooseLabel(label, index)">
                  <span :class="['icon-inner', label.chooseActive ? 'active' : '']" />
                </div>
                <div class="label-name">{{ label.name }}</div>
                <div v-if="false" class="label-count">{{ label.count }}人</div>
              </div>
            </div>
            <div class="calculate-count">
              预计总人数: <span class="count">{{ totalCount }}</span>人
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="additional">
            <span class="name" style="width: 150px">推送门店选择</span>
            <el-cascader
              v-model="departmentCascade"
              :options="departOptions"
              :show-all-levels="false"
              :props="departProps"
              @change="handleChangeDepartment"
            />
          </div>
        </el-col>
      </el-row>
      <!-- 推送分组比例选择 -->
      <el-row v-if="false">
        <el-col :span="6">
          <div class="additional">
            <span class="name">推送A/B组比例(%)</span>
            <el-input
              v-model="radio"
              placeholder="请输入比例"
              style="width: 150px"
              type="number"
              @input="handleInputRadio"
            />
          </div>
        </el-col>
      </el-row>
      <!-- 推送比例选择 -->
      <el-row>
        <el-col :span="12">
          <div class="set-header custome">
            <span>推送比例设定</span>
            <span v-if="false" @click="handleAddLabel">+ 新增组合标签</span>
          </div>
          <div class="label-choose">
            <div class="coupon-name">
              <span class="name">选择分组类型</span>
              <el-select
                v-model="groupId"
                placeholder="请选择分组"
                @change="handleChangeGroupChoose"
              >
                <el-option
                  v-for="gorup of groupChooseList"
                  :key="gorup"
                  :label="gorup"
                  :value="gorup"
                />
              </el-select>
            </div>
            <div class="group-list">
              <el-row justify="center">
                <el-col :span="6">
                  <div class="group-header">分组名称</div>
                </el-col>
                <el-col :span="9">
                  <div class="group-header">设置比例(%)</div>
                </el-col>
                <el-col :span="9">
                  <div class="group-header">选择礼券</div>
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) of groupList"
                :key="index + ''"
                style="display: flex;align-items:center"
              >
                <el-col :span="6">
                  <div class="group-item">{{ item.groupId + '组' }}</div>
                </el-col>
                <el-col :span="9">
                  <div class="group-item">
                    <el-input
                      v-model="item.radio"
                      style="width: 150px;"
                      placeholder="请输入比例"
                      type="number"
                      @input="handleInputRadioNew($event, index)"
                    />
                  </div>
                </el-col>
                <el-col :span="9">
                  <div class="group-item">
                    <el-select
                      v-model="item.couponId"
                      style="width: 200px"
                      placeholder="请选择礼券"
                      filterable
                      @change="handleChangeEveryCoupon($event, index)"
                      @visible-change="handleToggleOptionShow($event, index)"
                    >
                      <el-option
                        v-for="coupon of couponList"
                        :key="coupon.id"
                        :label="coupon.name"
                        :value="coupon.id"
                        :disabled="coupon.disabled"
                      />
                    </el-select>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <div class="additional">
            <span class="name">自动推送日期</span>
            <el-date-picker
              v-model="pushDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="推送日期"
              style="width: 200px"
            />
            <span class="time">推送时间</span>

            <el-select
              v-model="hourId"
              placeholder="选择推送时间"
            >
              <el-option
                v-for="hour of hoursArr"
                :key="hour"
                :label="hour"
                :value="hour"
              />
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="additional">
            <span class="name" style="width: 150px">数据收集截止日期</span>
            <span class="name-info date">(建议设置小于等于实际活动的截止日期)</span>
            <el-date-picker
              v-model="statisticsDeadline"
              type="date"
              placeholder="数据收集截止日期"
              value-format="yyyy-MM-dd"
              style="width: 200px"
            />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="confirm-cancel">
            <el-button type="primary" @click="handleConfirmAddTemplate">确认</el-button>
            <el-button type="info" plain @click="handleCancel">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { DateModel } from '@/utils/date'
import { queryCouponListNew, getDepartment } from '@/api/coupon/coupon'
import { getCombinationLabelList } from '@/api/coupon/label'
import { getAddTemplate, getUpdateTemplate, getTemplateDetail, getLabelNum } from '@/api/coupon/template'
export default {
  name: 'CouponSetting',
  data() {
    return {
      /**
       * 00 默认新增礼券发放设定
       * 01 编辑未发送礼券
       * 02 复用礼券规则
       */
      editType: '00',
      searchList: [
        {
          name: '人数最优',
          chooseActive: false
        },
        {
          name: '回购最多',
          chooseActive: false
        }
      ],
      couponList: [],
      activeCoupon: {},
      combinationLabelList: [],
      /* 新增礼券回传数据 */
      statisticalMonth: '',
      roleName: '',
      couponId: '',
      radio: 0,
      pushDate: '',
      statisticsDeadline: '',
      /* 更新数据回传数据 */
      id: '',
      roleId: '',
      // 推送比例
      groupChooseList: ['AB', 'ABC', 'ABCD', 'ABCDE', 'ABCDEF', 'ABCDEFG'],
      groupId: 'AB',
      groupList: [
      ],
      hoursArr: ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30'],
      hourId: '15:00',
      /**
       * 部门相关层级选择
       */
      departmentCascade: [],
      departOptions: [],
      departProps: {
        value: 'id',
        label: 'name',
        children: 'subDepartmentList',
        // 部门可选任意一级
        checkStrictly: true,
        multiple: true
      },
      labelLoading: false,
      totalCount: 0
    }
  },
  computed: {
    pushRadio() {
      return this.radio / 100
    },
    datePush() {
      return DateModel.timestampToDate(this.pushDate, true)
    },
    departmentId() {
      /**
       * this.departmentCascade 为二维数组
       * 需要扁平化处理
       */
      const list = []
      this.departmentCascade.forEach((ele) => {
        list.push(ele[ele.length - 1])
      })
      /* 取只出现一次的id */
      const filterList = list.filter((ele, index, self) => {
        return self.indexOf(ele) === self.lastIndexOf(ele)
      })
      console.info('filterList is', filterList)
      return filterList.join(',')
    },
    /* 选中的label */
    labelIds() {
      const labelList = []
      this.combinationLabelList.forEach(ele => {
        if (ele.chooseActive) {
          labelList.push(ele.labelId)
        }
      })
      return labelList
    }
  },
  watch: {
    // departmentId() {
    //   this.getLabelNum()
    // },
    statisticalMonth(oldVal, newVal) {
      console.log(oldVal, newVal)
      this.getLabelNum()
    },
    labelIds() {
      this.getLabelNum()
    },
    departmentCascade() {
      this.getLabelNum()
    }
  },
  created() {
    const date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth()
    if (month === 0) {
      month = 12
      year = year - 1
    } else {
      if (month < 10) {
        month = '0' + month
      }
    }
    this.statisticalMonth = `${year}-${month}`
  },
  async activated() {
    this.getRouteParams()
    await this.getCouponList()
    await this.getCombinationLabelList()
    if (this.roleId) {
      this.getTemplateDetail()
    }
  },
  async mounted() {
    await this.getCouponList()
    await this.getCombinationLabelList()
    await this.getDepartmentList()
    this.getRouteParams()
    this.handleChangeGroupChoose()

    /**
     * 如果 editType = 01 或者 02 需要发送请求获取当前模板详情
     */
    const { editType } = this
    if (editType === '01' || editType === '02') {
      this.getTemplateDetail()
    }
  },
  methods: {
    /**
     * 获取组合标签对应的人数
     */
    async getLabelNum() {
      const { labelIds, statisticalMonth, departmentId } = this
      if (labelIds.length === 0) {
        return
      }
      const requestData = {
        labelIds: labelIds
      }
      if (!statisticalMonth) {
        return
      }
      requestData.statisticalMonth = statisticalMonth

      if (departmentId) {
        requestData.departmentId = departmentId
      } else {
        requestData.departmentId = 0
      }
      console.log(requestData)
      this.labelLoading = true
      try {
        const numRes = await getLabelNum(requestData)
        console.log(numRes)
        this.labelLoading = false
        this.totalCount = numRes.totalCount
      } catch (err) {
        this.labelLoading = false
      }
    },
    /**
     * 层级选择处理
     */
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].subDepartmentList.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].subDepartmentList = undefined
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].subDepartmentList)
        }
      }
      return data
    },
    handleChangeDepartment(value) {
      console.log('value is', value)
      const list = []
      value.forEach((ele) => {
        list.push(...ele)
      })
      /* 取只出现一次的id */
      const filterList = list.filter((ele, index, self) => {
        return self.indexOf(ele) === self.lastIndexOf(ele)
      })
      console.log(filterList)
    },
    /**
     * 判断自动推送日期是否合适
     */
    isPushDateAvailable() {
      const pushDate = this.pushDate + ' ' + this.hourId
      const twoHoursSeconds = 60 * 60 * 1000 * 2
      const gap = new Date(pushDate.split('-').join('/')) - new Date()
      return gap > twoHoursSeconds
    },
    /* 判断分组选择是否符合要求 */
    isGroupListAvailable() {
      const list = this.groupList
      let countRadio = 0
      list.forEach((ele) => {
        countRadio += Number(ele.radio)
      })
      if (countRadio < 100) {
        this.$message('分组比例之和不得小于100')
        return false
      }
      return true
    },
    handleChangeGroupChoose() {
      const { couponList } = this
      const groupList = this.groupId.split('')
      const list = []
      /**
       * 当用户选择AB两个分组时
       */
      if (groupList.length === 2) {
        groupList.forEach((ele) => {
          if (ele === 'A') {
            list.push({
              groupId: ele,
              // 默认选中礼券列表中的第一个礼券
              couponId: couponList[0].id,
              radio: 100
            })
          } else if (ele === 'B') {
            list.push({
              groupId: ele,
              // 默认选中礼券列表中的第一个礼券
              couponId: couponList[couponList.length - 1].id,
              radio: 0
            })
          }
        })
      } else {
        groupList.forEach((ele) => {
          list.push({
            groupId: ele,
            // 默认选中礼券列表中的第一个礼券
            couponId: '',
            radio: 0
          })
        })
      }
      this.groupList = [...list]
      /**
       * 重置礼券列表禁用状态
       */
      console.log('before', couponList)
      for (let i = 0; i < couponList.length; i++) {
        if (couponList[i].disabled) {
          this.$set(couponList[i], 'disabled', false)
        }
      }
      console.log('after', couponList)
      this.couponList = couponList
    },
    /**
     * 监听每一个分组的礼券选择
     * event 当前选中的值
     * 当前选择索引
     */
    handleChangeEveryCoupon(event, index) {
    },
    /**
     * 监听每一个下拉框
     * event 当前是展开还是收起
     * index 当前操作索引
     */
    handleToggleOptionShow(event, index) {
      if (event) {
        const { groupList, couponList } = this
        console.log(groupList, couponList)
        const chooseCouponList = []
        groupList.forEach(ele => {
          if (ele.couponId && (ele.couponId !== groupList[index].couponId)) {
            chooseCouponList.push(ele.couponId)
            console.log(chooseCouponList)
          }
        })
        /**
         * 设置禁用状态
         * chooseCouponList 已选礼券列表
         * couponList 可选礼券列表
         */
        // 初始化，列表中的禁用状态设置为false
        for (let i = 0; i < couponList.length; i++) {
          this.$set(couponList[i], 'disabled', false)
        }
        chooseCouponList.forEach(coupon => {
          couponList.forEach((ele, index) => {
            if (ele.id === coupon) {
              couponList[index].disabled = true
            }
          })
        })
        this.couponList = couponList
        console.log(chooseCouponList)
      }
    },
    /* 监听每一个分组的比例输入 */
    handleInputRadioNew(value, index) {
      value = Number(value)
      if (typeof value !== 'number') {
        this.$message('请输入数字')
        this.groupList[index].radio = 0
      }
      /**
       * 计算分组里面的比例相加是否大于100
       * 如果大于一百，提示不合理
       */
      let count = 0
      for (let i = 0; i < this.groupList.length; i++) {
        if (i !== index) {
          count += Number(this.groupList[i].radio)
        }
      }
      const allcount = count + Number(this.groupList[index].radio)
      if (allcount > 100) {
        this.$message('比例相加不能大于100')
        this.groupList[index].radio = 100 - count
      }
    },
    async getDepartmentList() {
      const departRes = await getDepartment()
      const departmentList = JSON.parse(departRes.departmentCascade)
      console.log(departmentList)
      this.departOptions = this.getTreeData(departmentList)
    },
    async getTemplateDetail() {
      const { roleId } = this
      const detailRes = await getTemplateDetail(roleId)
      const { template } = detailRes
      this.roleName = template.roleName
      this.departmentCascade = JSON.parse(template.departmentCascade)
      /**
       * 处理回传的 groupList
       */
      const groupList = JSON.parse(template.groupList)
      for (let i = 0; i < groupList.length; i++) {
        groupList[i].radio = groupList[i].radio * 100
      }
      this.groupList = groupList
      this.groupId = this.groupChooseList[this.groupList.length - 2]
      this.statisticalMonth = template.statisticalMonth
      this.statisticsDeadline = template.statisticsDeadline
      const pushDateTime = template.pushDate.split(' ')
      this.pushDate = pushDateTime[0]
      if (pushDateTime.length > 1) {
        this.hourId = pushDateTime[1]
      }
      /* departmentCascade: [1, 2, 3] */
      /* 编辑或复用规则时，设置原本选择的的 label 为选中状态 */
      const { combinationLabelList } = this
      const selectList = template.combinationLabelList
      for (let i = 0; i < combinationLabelList.length; i++) {
        for (let j = 0; j < selectList.length; j++) {
          if (combinationLabelList[i].labelId === selectList[j].labelId) {
            combinationLabelList[i].chooseActive = true
          }
        }
      }
      this.combinationLabelList = combinationLabelList
      this.handleChangeCouponSelect()
    },
    /**
     * 获取路由信息
     */
    getRouteParams() {
      const { params } = this.$route
      const { editType } = params
      if (editType) {
        this.editType = editType
        if (editType === '01' || editType === '02') {
          this.id = params.id
          this.roleId = params.roleId
        }
      }
    },
    /**
     * 确认新建礼券
     */
    async handleConfirmAddTemplate() {
      const {
        roleName,
        statisticalMonth,
        pushDate,
        statisticsDeadline,
        combinationLabelList,
        id,
        roleId,
        hourId,
        departmentCascade,
        departmentId,
        totalCount } = this
      if (!roleName) {
        this.$message('请输入发送模板名')
        return
      }
      if (!statisticalMonth) {
        this.$message('请选择会员数据统计月')
        return
      }
      if (departmentCascade.length === 0) {
        this.$message('请选择推送门店')
        return
      }
      if (!pushDate) {
        this.$message('请选择自动推送日期')
        return
      }
      if (!this.isPushDateAvailable) {
        this.$message('请选择合适的推送时间')
        return
      }
      if (!statisticsDeadline) {
        this.$message('请选择推送情况回调截止日期')
        return
      }

      // 分组比例配置是否合理
      const isGroupAvailable = this.isGroupListAvailable()
      if (!isGroupAvailable) {
        return
      }
      /**
       * 处理选择的分组比例
       */
      const groupList = this.groupList
      for (let i = 0; i < groupList.length; i++) {
        groupList[i].radio = Number(groupList[i].radio) / 100
        groupList[i].groupName = groupList[i].groupId + '分组'
      }
      /**
       * 统计选择的标签
       */
      const labelList = combinationLabelList.filter((ele) => {
        return ele.chooseActive === true
      })
      if (!labelList.length) {
        this.$message('请选择用户标签')
        return
      }
      const templateValueList = []
      for (let i = 0; i < labelList.length; i++) {
        templateValueList.push({
          labelId: labelList[i].labelId
        })
      }
      const dateArray = statisticalMonth.split('-').slice(0, 2)
      // 发送数据
      const requestData = {
        roleName,
        groupList: JSON.stringify(groupList),
        statisticalMonth: dateArray.join('-'),
        pushDate: pushDate + ' ' + hourId,
        statisticsDeadline,
        templateValueList,
        departmentId,
        labelUsersCount: totalCount,
        departmentCascade: JSON.stringify(departmentCascade)
      }
      console.log(requestData)
      // 发送请求
      if (this.editType === '00' || this.editType === '02' || this.editType === '03') {
        await getAddTemplate(requestData)
        this.$message({
          message: '新建礼券推送模板成功',
          type: 'success'
        })
      } else if (this.editType === '01') {
        requestData.id = id
        requestData.roleId = roleId
        await getUpdateTemplate(requestData)
        this.$message({
          message: '礼券推送模板修改成功',
          type: 'success'
        })
      }
      /**
       * 操作成功，初始化数据
       */
      this.id = ''
      this.roleId = ''
      this.roleName = ''
      this.couponId = ''
      this.radio = ''
      this.statisticalMonth = ''
      this.pushDate = ''
      this.activeCoupon = {}
      await this.getCouponList()
      await this.getCombinationLabelList()
      console.log('返回上一层', this.editType)
      this.editType = '00'
      this.$router.go(-1)
    },
    /**
     * 取消新建返回上一层
     */
    async handleCancel() {
      this.editType = '00'
      this.id = ''
      this.roleId = ''
      this.roleName = ''
      this.couponId = ''
      this.radio = ''
      this.statisticalMonth = ''
      this.pushDate = ''
      this.activeCoupon = {}
      await this.getCouponList()
      await this.getCombinationLabelList()
      this.$router.go(-1)
    },
    /**
     * 更新当前选择礼券
     */
    handleChangeCouponSelect() {
      this.activeCoupon = this.couponList.find((ele) => ele.id === this.couponId)
    },
    /* 监听用户输入 */
    handleInputRadio(value) {
      value = Number(value)
      if (typeof value !== 'number') {
        this.$message('请输入数字')
        this.radio = 0
      }
      if (value > 100) {
        this.$message('输入比例不能大于100')
        this.radio = 100
      }
    },
    handleChooseLabel(label, index) {
      const labelList = this.combinationLabelList
      labelList[index].chooseActive = !labelList[index].chooseActive
      this.combinationLabelList = labelList
    },
    handleChooseSearch(search, index) {
      const searchList = this.searchList
      searchList[index].chooseActive = !searchList[index].chooseActive
      this.searchList = searchList
    },
    /**
     * 查询所有可选礼券
     */
    async getCouponList() {
      const couponRes = await queryCouponListNew()
      console.log(couponRes)
      this.couponList = couponRes
      this.activeCoupon = this.couponList[this.couponList.length - 1]
      this.couponId = this.activeCoupon.id
    },
    /**
     * 查询所有可选标签
     */
    async getCombinationLabelList() {
      const requestData = {
        pageNum: 1,
        pageSize: 1000
      }
      const labelRes = await getCombinationLabelList(requestData)
      const list = labelRes.content
      for (let i = 0; i < list.length; i++) {
        this.$set(list[i], 'chooseActive', false)
      }
      this.combinationLabelList = list
    },
    /**
     * 新增礼券
     */
    handleAddCouponType() {
      this.$router.push({
        name: 'CouponType',
        params: {
          editType: '01'
        }
      })
    },
    /**
     * 新增组合标签
     */
    handleAddLabel() {
      this.$router.push({
        name: 'Label',
        params: {
          editType: '01'
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .coupon-type{
    width: 100%;
    min-height: 90px;
    border-radius: 6px;
    background: #ffffff;
    padding: 30px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    .title{
      font-size: 14px;
      color: #606266;
    }
    .common{
      .gap{
        color: #606266;
        margin: 0 10px;
      }
    }
    .set-header{
      margin-top: 0px;
      font-size: 14px;
      color: #333333;
      span{
        &:nth-of-type(2){
          margin-left: 20px;
          color: #409EFF;
          cursor: pointer;
        }
      }
    }
    .set-header.custome{
      margin-top: 20px;
    }
    .coupon-name{
      margin-top: 12px;
      font-size: 14px;
      color: #606266;
      .name{
        margin-right: 20px;
      }
    }
    .coupon-view{
      margin-top: 10px;
      background: #fafafa;
      border: 1px dashed #dbdbdb;
      border-radius: 2px;
      padding: 10px;
      .view-content{
        background: #fff;
        border-radius: 2px;
        border: 1px dashed #dbdbdb;
        padding: 10px;
        min-height: 120px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        .left{
          max-height: 94px;
          overflow: hidden;
        }
        .coupon-img{
          width: 80px;
          height: 80px;
        }
      }
    }
    .label-choose{
      margin-top: 20px;
      padding: 20px;
      background: #fafafa;
      border: 1px dashed #dbdbdb;
      border-radius: 2px;
      font-size: 14px;
      color: #101010;
      .search-condition{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item{
          padding: 6px 8px;
          border: 1px solid #e7e7e7;
          border-radius: 2px;
          cursor: pointer;
          &.active{
            border-color: #5677fc;
            color: #5677fc;
          }
        }
      }
      .choose-label{
        width: 100%;
        // margin-top: 40px;
        margin-bottom: 6px;
        display: flex;
        flex-direction: column;
        max-height: 400px;
        overflow: scroll;
        .choose-label-item{
          display: flex;
          // justify-content: space-between;
          align-items: center;
          padding: 6px;
          .select-icon{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid #606266;
            cursor: pointer;
            transition: all .2s ease-in-out;
            &.active{
              border-color: #5677fc;
            }
            .icon-inner{
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background: transparent;
              transition: all .2s ease-in-out;
              &.active{
                background: #5677fc;
              }
            }
          }
          .label-name{
            margin-left: 10px;
            color: #333;
          }
        }
      }
      /* 标签总人数 */
      .calculate-count{
        margin-top: 16px;
        .count{
          font-size: 22px;
          font-weight: 600;
        }
      }
      /* 分组比例选择 */
      .group-list{
        padding: 20px 0px;
        font-size: 14px;
        color: #666;
        .group-header{
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 10px;
        }
        .group-item{
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 10px;
        }
      }
    }
    .additional{
      position: relative;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      margin-top: 12px;
      font-size: 14px;
      color: #606266;
      .name{
        width: 120px;
        margin-right: 20px;
        color: #333;
      }
      .time{
        margin: 0px 20px;
      }
      .name-info{
        position: absolute;
        top: 28px;
        left: 0px;
        font-size: 11px;
        &.date{
          top: 36px;
        }
      }
    }
    .confirm-cancel{
      margin-top: 25px;
    }
  }
  ::-webkit-scrollbar{
    display: none;
  }
</style>
